<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			* {
				padding: 0;
				margin: 0;
			}

			canvas {
				border: solid 1px cadetblue;
				margin: 10px;
			}
		</style>
	</head>
	<body>
		<canvas id="canvas" width="500" height="800"></canvas>
		<script type="text/javascript">
			/* 方法获取HTML <canvas> 元素的引用并获取这个元素的context——图像稍后将在此被渲染 */
			const ctx = document.getElementById('canvas').getContext('2d');
			console.log(ctx);
			ctx.beginPath(); //要开始绘制
			ctx.font = '30px 黑体';
			ctx.fillStyle = 'pink';
			ctx.strokeStyle="#5F9EA0";
			
			/* 设置阴影 */
			ctx.shadowBlur=20;//设置或返回用于阴影的模糊级别
			ctx.shadowColor="rgba(0,0,0,1)";//设置或返回用于阴影的颜色
			ctx.shadowOffsetX=10;//设置或返回阴影距形状的水平距离
			ctx.shadowOffsetY=10;//设置或返回阴影距形状的垂直距离
			
			
			ctx.fillText('holl window', 20, 60) //绘制文字 x y
			var x = 600;
			setInterval(()=>{
				//清空画布
				ctx.clearRect(0,0,600,600);
				x-=3;
				if(x<-200){
					x=600;
				}
				ctx.strokeText('holl window',x ,120)
			},20)
			
			
			ctx.closePath(); //结束路径
		</script>
	</body>
</html>
